<template>
  <div class="appointment-time-image">
    <div class="time-text">
      <span class="label-text"></span>
      <span class="date-text">{{ formattedDate }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import moment from 'moment'

interface Props {
  appointmentTime: string
}

const props = defineProps<Props>()

const formattedDate = computed(() => {
  if (!props.appointmentTime) return ''
  
  // 使用moment格式化日期为中文格式
  const date = moment(props.appointmentTime)
  const year = date.format('YYYY')
  const month = date.format('MM')
  const day = date.format('DD')
  
  return `${year}年${month}月${day}号`
})
</script>

<style scoped>
.appointment-time-image {
  display: inline-block;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-width: 180px;
}

.time-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.3px;
}

.label-text {
  color: #9e9e9e;
  margin-right: 8px;
}

.date-text {
  color: #757575;
  font-weight: 500;
}

/* 添加一些视觉效果使其更像图片 */
.appointment-time-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

.appointment-time-image::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 7px;
  pointer-events: none;
}
</style>